<template>
  <div id="">
    <headerbox :headerTitle="'添加银行卡'" :hasBack='true'></headerbox>
    <ul class="formList mb10">
      <li>
        <span>真实姓名</span>
        <input type="text" name="" v-model="cardJson.realName" placeholder="请输入持卡人姓名">
      </li>
      <li>
        <span>身份证号</span>
        <input type="text" name="" v-model="cardJson.idNum" placeholder="请正确填写身份证号码">
      </li>
    </ul>
    <ul class="formList mb10">
      <li @click="chooseBank">
        <span>开户银行</span>
        <input type="text" name="" v-model="bankValue.bankName" readonly placeholder="请选择开户银行">
      </li>
      <li>
        <span>银行账号</span>
        <input type="text" name="" v-model="cardJson.cardNum" placeholder="请输入银行卡号">
      </li>
    </ul>
    <p class="notice">请确保姓名、身份证号、银行卡开户人为同一人</p>

    <div class="p10 sureAdd">
      <button type="button" name="button" class="blockButton" @click="bindCard">确定添加</button>
    </div>

    <!-- 银行卡picker -->
    <mt-popup
      v-model="bankVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="banklistSlots" :valueKey="'bankName'" @change="onBankChange"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import {userCardBind,bankList} from '@/utils/ajaxRequest.js';
import { luhnCheck } from '@/utils/idCardCheck.js';
export default {
  name: "",
  data: () => ({
    name:'',
    cardJson:{
      token:'',
      realName:'',      //真实名字
      idNum:'',         //身份证号码
      cardType:'',      //卡类型（列表选择）
      cardNum:'',       //银行卡号
    },
    banklistSlots:[{
      flex: 1,
      values: [{id:'',classifyName:''}],
      className: 'slot1',
      textAlign: 'center'
    }],    //可选银行卡
    bankVisible:false,
    bankValue:'',
  }),
  components: {
  },
  methods: {
    chooseBank() {
      this.bankVisible = true;
    },
    // 选择银行
    onBankChange(picker,values) {
      console.log(values);
      this.cardJson.cardType = values[0].id;
      this.bankValue = values[0];
    },
    // 绑定银行卡
    bindCard() {
      let self = this;
      let cardParam = self.cardJson;


      for (var key in cardParam) {
        if (cardParam[key]=='') {
          self.toast(key+ '不为空');
          return false;
        }
      }
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;     //身份证正则
      if(!reg.test(cardParam.idNum)){                  //身份证验证
          self.toast('身份证号填写有误');
          return false;
      }
      if (!luhnCheck(self.cardJson.cardNum)) {   //银行卡号验证
        return false;
      }
      userCardBind(cardParam).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.cardJson.token = xlyd_loginInfo.token;
    // 获取可选银行卡
    bankList().then(res=>{
      console.log(res);
      if (res) {
        self.banklistSlots[0].values = res.data.result;
      }
    })
  }
}
</script>
<style lang="scss" scoped>

.notice{
  color: $redColor;
  padding: 0 10px;
  font-size: 12px;
}
.sureAdd{
  margin-top: 50px;
}
</style>
